<template>
  <div ref="mapViewDiv" class="mapView-root"></div>
</template>
<script>
import WMTSLayer from "esri/layers/WMTSLayer";
import TileLayer from "esri/layers/TileLayer";
import LayerList from "esri/widgets/LayerList";
import Map from "esri/Map";
import MapView from "esri/views/MapView";
import WebMap from "esri/WebMap";
import Extent from "esri/geometry/Extent";
import { ref, onMounted } from "vue";

export default {
  name: "EsriMap",
  props: {
    radius: {
      type: Number,
      default: 60,
    },
  },
  setup() {
    let mapViewDiv = ref("mapViewDiv");

    const { clusterMap, layer } = useMap();
    onMounted(() => {
      var view = new MapView({
        container: mapViewDiv.value,
        map: clusterMap,
        center: [111.5, 40.48],
        extent: new Extent({
          xmin: 97.17153,
          ymin: 37.406714,
          xmax: 125.2701,
          ymax: 51.517843,
          spatialReference: {
            wkid: 4490,
          },
        }),
      });
      view.when(function () {
        view.extent = layer.fullExtent;
        var layerList = new LayerList({
          view: view,
        });
        view.ui.add(layerList, "bottom-left");
      });
      console.log(view);
    });

    return { mapViewDiv };
  }, //end setup
};
const useMap = () => {
  let layer = new TileLayer({
    url: "http://t0.tianditu.gov.cn/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=d5b24677cd5d66023be61f408eeaf45a"
  });

  let clusterMap = new Map({
    layers: [layer],
  });

  return { clusterMap, layer };
};
</script>
<style scoped>
.mapView:focus,
.mapView-root:focus {
  outline: none !important;
}

.mapView-root {
  background-color: rgb(228, 94, 17);
  width: 1000px;
  height: 800px;
}
</style>